<template>
  <div class="bg">
    <div class="demo-image__preview" style="display:inline-block">
      <el-image
        style="width: 100px; height: 100px; margin-left:200px;margin-top:50px;"
        :src="url"
        :preview-src-list="srcList"
      >
      </el-image>
    </div>
    <div class="demo-input-suffix" style="width:600px; float:right; margin-left:100px; margin-top:100px; margin-right:500px">
        <el-input
        placeholder="请输入内容"
        v-model="input1"
        >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-button slot="append" icon="el-icon-search" @click="searchCon">搜索</el-button>
        </el-input>
    </div>
    <div>
      <produce></produce>
    </div>
  </div>
</template>
<script>
import Produce from '../views/Produce.vue'
  export default {
    data() {
      return {
        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lgstatic.com%2Fthumbnail_300x300%2Fi%2Fimage%2FM00%2F0D%2F45%2FCgqKkVbY9ICAU4kCAADJxGkvMqY307.png&refer=http%3A%2F%2Fwww.lgstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624933429&t=507e1d65dfeb891052d975abad434ac4',
        srcList: [
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lgstatic.com%2Fthumbnail_300x300%2Fi%2Fimage%2FM00%2F0D%2F45%2FCgqKkVbY9ICAU4kCAADJxGkvMqY307.png&refer=http%3A%2F%2Fwww.lgstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624933429&t=507e1d65dfeb891052d975abad434ac4',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.lgstatic.com%2Fthumbnail_300x300%2Fi%2Fimage%2FM00%2F0D%2F45%2FCgqKkVbY9ICAU4kCAADJxGkvMqY307.png&refer=http%3A%2F%2Fwww.lgstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624933429&t=507e1d65dfeb891052d975abad434ac4'
        ],
        input1:''
      }
    },
    methods:{
      searchCon(){
        alert("搜索的内容不在");
      }
    },
    components:{
        Produce:Produce
      }
  }
</script>
<style>
  .demo-input-suffix{
    border-radius: 50px;
  }
  .bg{
    background-color: white;
  }
</style>